<template>
  <div class="GoldWater">
    <div>
      总充值：{{ rechargeTotal }}
      <span class="margin"></span>
      总消耗：{{ useTotal }}
    </div>
    <el-divider></el-divider>
    <div class="searchBox">
      <el-radio-group
        size="small"
        @change="search"
        v-model="type"
        fill="#7b94d8"
      >
        <el-radio-button label="">不限</el-radio-button>
        <el-radio-button label="1">增加</el-radio-button>
        <el-radio-button label="2">减少</el-radio-button>
      </el-radio-group>
      <div>
        <el-date-picker
          size="small"
          v-model="timeArr"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="timeOptions"
          value-format="yyyy-MM-dd"
          @change="focus"
        >
        </el-date-picker>
        <el-button
          class="btn"
          @click="search"
          icon="el-icon-search"
          size="small"
          >查询搜索</el-button
        >
      </div>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%; margin-top: 10px"
      :header-cell-style="{ background: '#f5f7fa' }"
    >
      <template slot="empty">
        <el-empty :image-size="200"></el-empty>
      </template>
      <el-table-column prop="createTime" label="时间"> </el-table-column>
      <el-table-column prop="remark" label="途径"> </el-table-column>
      <el-table-column prop="balance" label="记录"> </el-table-column>
    </el-table>
    <pagination
      :total="total"
      :page.sync="page"
      :limit.sync="pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // 分页
import { userCoinBill } from "@/api/UserManagement";
export default {
  components: { Pagination },
  props: ["id"],
  data() {
    return {
      type: "1",
      rechargeTotal: "",
      useTotal: "",
      timeArr: [],
      startTime: "",
      endTime: "",
      timeOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      tableData: [],
      total: 0,
      page: 1,
      pageSize: 10,
    };
  },
  methods: {
    focus() {
      if (!this.timeArr) {
        this.timeArr = [];
      }
      this.startTime = this.timeArrA[0];
      this.endTime = this.timeArrA[1];
    },
    async getList() {
      if (!this.id) {
        return;
      }
      const res = await userCoinBill({
        userId: this.id,
        page: this.page,
        pageSize: this.pageSize,
        type: this.type,
        startTime: this.startTime,
        endTime: this.endTime,
      });
      if (res.code == 0) {
        this.tableData = res.data.head.list;
        this.rechargeTotal = res.data.head.rechargeTotal;
        this.useTotal = res.data.head.useTotal;
        this.total = parseInt(res.data.total);
      }
    },
    search() {
      this.page = 1;
      this.getList();
    },
  },
  created() {
    this.getList();
  },
};
</script>

<style lang="less" scoped>
.GoldWater {
  .margin {
    margin-right: 20px;
  }
  .searchBox {
    display: flex;
    justify-content: space-between;
  }
}
</style>